<template>
  <div class="ArticleInfo">
    <el-card>
      <el-tabs>
        <el-tab-pane label="基础信息">
          <!-- 表单 -->
          <el-form ref="form1" label-width="220px" :model="formData" :rules="rules">
            <!-- 标题 -->
            <el-form-item label="标题" style="width: 79%" prop="title">
              <el-input v-model="formData.title" placeholder="请输入标题名称" />
            </el-form-item>
            <el-row type="flex" justify="space-between" style="width: 70%">
              <!-- 作者 -->
              <el-form-item label="作者" prop="author">
                <el-input
                  v-model="formData.author"
                  style="width: 300px"
                  placeholder="请输入作者"
                />
              </el-form-item>
              <!-- 分类 -->
              <el-form-item label="分类" prop="cateid">
                <el-select
                  v-model="formData.cateid"
                  style="width: 300px"
                  placeholder="请选择"
                  @focus="getArticleCate"
                >
                  <el-option
                    v-for="item in articleList"
                    :key="item.id"
                    :label="item.catename"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-between" style="width: 70%">
              <!-- 阅读次数 -->
              <el-form-item label="阅读次数" prop="click">
                <el-input-number
                  v-model="formData.click"
                  :min="1"
                  style="width: 300px"
                />
              </el-form-item>
              <!-- 创建时间 -->
              <el-form-item label="创建时间" prop="create_date">
                <el-date-picker
                  v-model="formData.create_date"
                  style="width: 300px"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-row>
            <!-- 推荐and置顶 -->
            <el-row type="flex" justify="space-between" style="width: 63%">
              <el-form-item label="是否推荐" prop="ishot">
                <span :class="formData.ishot ? '' : 'color'">否</span>
                <el-switch
                  v-model="formData.ishot"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                />
                <span :class="formData.ishot ? 'color' : ''">是</span>
              </el-form-item>

              <el-form-item label="是否置顶" prop="ishot">
                <span :class="formData.istop ? '' : 'color'">否</span>
                <el-switch
                  v-model="formData.istop"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                />
                <span :class="formData.istop ? 'color' : ''">是</span>
              </el-form-item>
            </el-row>
            <!-- 收藏数量 -->
            <el-form-item label="收藏数量" prop="lovenum">
              <el-input
                v-model="formData.lovenum"
                style="width: 300px"
                placeholder="请输入收藏数量名称"
              />
            </el-form-item>
            <!-- 图片缩略图 -->
            <el-form-item label="文章缩略图">
              <upload-img ref="uploadImg">
                <el-button size="small" type="primary">点击上传</el-button>
              </upload-img>
            </el-form-item>
            <!-- 文章标签 -->
            <el-form-item label="文章标签">
              <el-checkbox-group v-model="checkList">
                <el-checkbox
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.tagname"
                >{{ item.tagname }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="SEO管理">
          <el-form ref="form2" label-width="220px" :model="formData" :rules="rules">
            <el-form-item label="SEO关键字" prop="keywords">
              <el-input
                v-model="formData.keywords"
                type="textarea"
                rows="4"
                style="width: 800px"
              />
            </el-form-item>

            <el-form-item label="SEO描述" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                rows="4"
                style="width: 800px"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="文章内容">
          <el-form ref="form3" label-width="220px" :model="formData" :rules="rules">
            <el-form-item label="文章内容" prop="content">
              <quill-editor v-model="formData.content" class="quillEditor" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-row type="flex" justify="center" class="btn">
          <el-button type="success" size="small" @click="btnOK">立即发布</el-button>
          <el-button type="primary" size="small">保存草稿</el-button>
          <el-button type="warning" size="small" @click="$router.push('/content_article')">返回列表</el-button>
        </el-row>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
// todo 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getArticleCateAllApi } from '@/api/contnet/cate'
import { getTagAllApi } from '@/api/contnet/tag'
import { addArticleApi, getArticleDetaileApi, editArticleDetaileApi } from '@/api/contnet/article'
export default {
  name: 'ArticleInfo',
  components: {
    quillEditor
  },
  data() {
    return {
      formData: {
        title: '',
        author: '',
        cateid: '',
        lovenum: '',
        create_date: '',
        ishot: 0,
        istop: 0,
        click: 1,
        pic: '',
        content: '',
        description: '',
        keywords: '',
        status: ''
      },
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        author: [{ required: true, message: '请输入', trigger: 'blur' }],
        cateid: [{ required: true, message: '请输入', trigger: 'change' }],
        click: [{ required: true, message: '请输入', trigger: 'blur' }],
        create_date: [{ required: true, message: '请输入', trigger: 'blur' }],
        ishot: [{ required: true, message: '请输入', trigger: 'blur' }],
        istop: [{ required: true, message: '请输入', trigger: 'blur' }],
        lovenum: [{ required: true, message: '请输入', trigger: 'blur' }],
        pic: [{ required: true, message: '请输入', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        description: [{ required: true, message: '请输入', trigger: 'blur' }],
        keywords: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 文章标签
      checkList: [],
      // 文章分类
      articleList: [],
      // 全部标签
      tagList: []
    }
  },
  computed: {
    // 点击编辑保存路由跳转id
    articleId() {
      return this.$route.params.id
    }
  },
  created() {
    this.getTagAll()
    this.getArticleDetaile()
  },
  methods: {
    // 获取文章分类
    async getArticleCate() {
      const { data: res } = await getArticleCateAllApi()
      this.articleList = res
    },
    // 获取分类标签
    async getTagAll() {
      const { data: res } = await getTagAllApi()
      this.tagList = res
    },
    // 新增文章，提交数据
    async btnOK() {
      try {
        await this.$refs.form1.validate()
        await this.$refs.form2.validate()
        await this.$refs.form3.validate()
      } catch (error) {
        return this.$message.warning('还有必填项没有填写')
      }
      // 判断有id是修改，没有就是新增
      if (this.formData.user_id) {
        this.formData.pic = this.$refs.uploadImg.fileList[0].realtiveUrl
        this.formData.create_date = Date.now(this.formData.create_date)
        await editArticleDetaileApi({ ...this.formData, tags: this.checkList.join(',') })
        this.$message.success('修改成功')
      } else {
        this.formData.pic = this.$refs.uploadImg.fileList[0].realtiveUrl
        this.formData.create_date = Date.now(this.formData.create_date)
        await addArticleApi({ ...this.formData, tags: this.checkList.join(',') })
        this.$message.success('添加成功')
      }
      this.$router.push('/content_article')
    },
    // 文章详情回显
    async getArticleDetaile() {
      const { data: res } = await getArticleDetaileApi(this.articleId)
      this.formData = res
      this.$refs.uploadImg.fileList = [{ url: 'http://124.223.14.236:8060/' + res.pic, realtiveUrl: res.pic }]
      this.checkList = res.tags.split(',')
    }
  }
}
</script>
<style lang="scss" scoped>
.ArticleInfo {
  padding: 20px 20px 0 20px;
  .quillEditor {
    width: 800px;
    height: 400px;
  }
  .el-switch {
    margin: 0 20px;
  }
  .color {
    color: #409eff;
  }
  .btn {
    margin-top: 50px;
  }
  .disabled {
    display: none;
  }
}
</style>
